【武汉第141期】如何使用requireJS

分享人:王峰

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

2.知识剖析

什么是requireJS

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

3.常见问题

首先我们来看看一下引入requireJS和不引入requireJS的区别 demo1
demo2

4.解决方案

requireJS的基础知识

require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

比如在上个demo中,就是通过define函数定义了一个模块

                
                    define(function(){
                        function fun1(){
                            alert("it works");
                        }
                        fun1();
                    });
                
            

然后通过require来加载依赖模块

                
                    require(["a1"]);
                
            

5.编码实战

6.扩展思考

如果我要加载一个jq的cdn路径,该怎么引入?

在这里需要用到require.config,require.config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字

                
                    require.config({
                        paths : {
                            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
                        }
                    })
                    require(["jquery","a"],function($){
                        $(function(){
                            alert("load finished");
                        })
                    })
                
            

7.参考文献

js模块化工具--requireJS教程

8.更多讨论

在用requireJS调用jquery的过程中,如何利用requireJS实现不让jquery污染全局$?

谢谢观看
Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He